<template>
  <div class="c-minh c-bg-sgray">
    <div class="c-mb10 c-pv20 c-bg-white">
      <examination-item v-if="examinationInfo!=null" @showNow="drawNowCom" :hasGetCer="isMatch==3?true:false" :item="examinationInfo"></examination-item>
    </div>


    <div class="c-bg-white c-pl32" v-if="examPaperList.length!=0">
      <div class="c-pv30 c-pr32 c-flex-row c-bd-b1" v-for="(item,index) in examPaperList" :key="index" @click="goTest(item.examStatus,item.paperMainId,item.goOnNum,item.hasAns,index,item.enableDayPractice,item.restart)">
        <div v-if="item.type== 1" class="c-w10 icon iconfont c-fs34 c-fc-gray c-lh28">
          &#xe791;
        </div>
        <div v-else class="c-w10 icon iconfont c-fs34 c-fc-gray c-lh28">
          &#xe7f0;
        </div>
        <div class="c-w80 c-flex-column c-justify-sb">
          <div class="c-lh c-fs28 c-fc-xblack c-text-ellipsis1 c-pt4">{{item.name}}</div>
          <div class="c-flex-row c-aligni-center c-mt14 c-mb14" v-if="item.enableDayPractice==1">
            <span class="c-fs18 c-ph8 c-pv2 c-lh-n theme-bg-10 c-fc-white c-br4 c-mr8 c-p c-vcAlign-middle c-mr10">
              <span class="theme-fc c-fs18">每日一练</span>
              <span class="c-pa prodType-triangle"></span>
            </span>
          </div>
          <div class="c-fs20 c-fc-gray "><span v-if="item.hasHonor==1" class="icon iconfont c-fs20 c-mr12">&#xea1b;</span><span class="c-mr32">共<span class="theme-fc">{{item.hasAns}}</span>题</span><span>{{item.joinNumber}}人参与</span></div>
        </div>
        <div v-if="item.examStatus==1" class="c-fs60 c-textAlign-c icon iconfont c-fc-gray c-hh70 c-lh70">&#xe856;</div>
        <div v-if="examinationInfo && examinationInfo.isBarrier == 1 && index > openKey" class="c-w10 c-textAlign-r icon iconfont c-fs24 c-fc-gray c-hh70 c-lh70">
          &#xe8bc;
        </div>
        <div v-else class="c-w10 c-textAlign-r icon iconfont c-fs20 c-fc-gray c-hh70 c-lh70">
          &#xe60e;
        </div>
      </div>
    </div>
    <loading-status-tem :noData="paperListShow" :noDataText="'暂无考试，请联系管理员'"></loading-status-tem>
  </div>
</template>

<script>
import ExaminationItem from "@/components/templates/examinationItem.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";


import { utilJs } from "@/utils/common.js";

export default {
  name: "MyExaminationDetail",
  components: {
    loadingStatusTem,
    ExaminationItem,
  },
  props: [],
  data() {
    return {
      topicId: '',
      is_page: false,
      page: 1,
      limit: 10,
      examinationInfo: null,
      examPaperList: [],
      paperListShow: false,
      topicType: 0,
      isMatch: 1,
      showCer: false,
      spreadInfo: {},
      isLoading: false,
      showCerPop: false,
      openKey: 0,
      matchPaper:'',
      origin:'',
      prodId:''
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
  },
  methods: {
    goTest: function (examStatus, paperMainId, goOnNum, hasAns, eIndex, enableDayPractice, restart) {
      let $this = this;
//       paperMainId	试卷ID
// prodType	78训练营  61知识套餐
// prodId
    utilJs.getMethod(global.apiurl + 'paper/judgeEntry/' + paperMainId + '?topicId=' + $this.topicId, function (res) {
      if (res.status == 1) {
        utilJs.postMethod(global.apiurl + "paper/entryRecord", {
          paperMainId: paperMainId,
          prodId: $this.prodId,
          prodType: $this.origin
        }, res => {
        if ($this.examinationInfo.isBarrier == 1 && eIndex > $this.openKey) {
          $this.$showCjToast({
            text: "该考试暂未解锁",
            type: 'warn',
            time: 3000
          });
          return;
        }
        if (enableDayPractice == 1 && restart == 1) {
          utilJs.getMethod(global.apiurl + 'exam/transit/' + paperMainId + '?topicId=' + $this.topicId + '&entryProdType=2&prodId=' + $this.topicId, function (res) {
            $this.$routerGo($this, "push", {
              path: "/homePage/examination/examinationAnswer",
              query: { paperMainId: paperMainId, topicId: $this.topicId, goOnNum: 1 }
            });
          })
        } else {
        // examStatus 0未考试 1已经完成考试 2考试进行一半
          if (examStatus == 0) {
            if (hasAns == 0) {
              $this.$showCjToast({
                text: "该考试暂无题目，请联系管理员",
                type: 'warn',
                time: 3000
              });
            } else if ($this.topicType == 1) {
              utilJs.getMethod(global.apiurl + 'exam/transit/' + paperMainId + '?topicId=' + $this.topicId + '&entryProdType=2&prodId=' + $this.topicId, function (res) {
                $this.$routerGo($this, "push", {
                  path: "/homePage/examination/examinationAnswer",
                  query: { paperMainId: paperMainId, topicId: $this.topicId, goOnNum: 1 }
                });
              })
            } else if ($this.topicType == 2) {
              $this.$routerGo($this, "push", {
                path: "/homePage/examination/quizEntry",
                query: { paperMainId: paperMainId, topicId: $this.topicId }
              });
            }
          } else if (examStatus == 1) {
            $this.$routerGo($this, "push", {
              path: "/homePage/examination/examinationResult",
              query: { paperMainId: paperMainId, topicId: $this.topicId }
            });
          } else if (examStatus == 2) {
            if (hasAns == 0) {
              $this.$showCjToast({
                text: "该考试暂无题目，请联系管理员",
                type: 'warn',
                time: 3000
              });
            } else {
              if (goOnNum == 1 && $this.topicType == 2) {
                $this.$routerGo($this, "push", {
                  path: "/homePage/examination/quizEntry",
                  query: { paperMainId: paperMainId, topicId: $this.topicId }
                });
              } else {
                $this.$routerGo($this, "push", {
                  path: "/homePage/examination/examinationAnswer",
                  query: { paperMainId: paperMainId, topicId: $this.topicId, goOnNum: goOnNum }
                });
              }
            }
          }
        }
        });
      } else {
        $this.$showCjToast({
            text: res.msg + '</br>' + res.showTime,
            type: 'warn'
          });
        }
      })
    },
    getTopicInfo: function () {
      this.topicId = this.$route.query.ExaminationNo;
      let $this = this;
      //获取详情信息
      utilJs.getMethod(global.apiurl + 'exam/topicDetail/' + this.topicId, function (res) {
        $this.examinationInfo = res.topicInfo;
        //      $this.examinationInfo.price = null;

        //      $this.examinationInfo.showTime = true;
        //      $this.examinationInfo.time=$this.examinationInfo.createdAt.split(" ")[0];
        //      $this.examinationInfo.vipDiscount = -1;
        //      $this.examinationInfo.svipDiscount = -1;
        $this.isMatch = res.topicInfo.isMatch;
        if ($this.isMatch == 2) {
          $this.showCerPop = true;
        }
        $this.topicType = res.topicInfo.topicType;
        $this.getTopicDetailLists();
        $this.wechatShare();
      });
    },
    getTopicDetailLists: function () {
      let $this = this;
      if (this.isLoading == true) {
        return;
      }
      this.isLoading = true;
      if (this.examinationInfo.isBarrier == 1) {
        this.limit = 100
      }
      utilJs.getMethod(global.apiurl + 'exam/paperInTopic/' + this.topicId + '?page=' + this.page + '&limit=' + this.limit, function (res) {
        $this.isLoading = false;
        $this.openKey = res.openKey;
        // $this.examPaperList = res.paper.data;
        $this.examPaperList = $this.examPaperList.concat(res.paper.data);
        $this.page = res.paper.data && (res.paper.data.length >= $this.limit) ? ($this.page + 1) : $this.page;//res.current_page < res.last_page ? ($this.page + 1) : $this.page;
        $this.is_page = res.paper.data && (res.paper.data.length >= $this.limit) ? true : false;//res.current_page < res.last_page ? true : false;;
        if ($this.examPaperList.length == 0) {
          $this.paperListShow = true;
        }
      }, failRes => {
        $this.isLoading = false;
      });
    },

    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getTopicDetailLists();
        }
      });
    },
    //分享
    wechatShare: function () {
      let title = this.examinationInfo.shareTitle;
      let shareImg = this.examinationInfo.sharePic || require('../../../assets/examination_defult.png');
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/examination/examinationDetail?ExaminationNo=${this.topicId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.examinationInfo.shareDesc;//"共包含"+this.examinationInfo.hasPaper+"套考卷";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.examinationInfo.shareTitle;
      let shareImg = this.examinationInfo.sharePic || require('../../../assets/examination_defult.png');
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/examination/examinationDetail?ExaminationNo=${this.topicId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.examinationInfo.shareDesc;//"共包含"+this.examinationInfo.hasPaper+"套考卷";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  },
  activated() {
    setDocumentTitle("测评详情");// eslint-disable-line
    this.paperListShow = false;
    this.origin = this.$route.query.origin || '';
    this.prodId = this.$route.query.prodId || '';
    this.examinationInfo = null;
    this.examPaperList = [];
    this.page = 1;
    this.isMatch = 1;
    this.isLoading = false;
    this.spreadInfo = {};
    this.showCer = false;
    this.showCerPop = false;
    this.getTopicInfo();
    document.getElementById("spreadCerImg").setAttribute("src", "");
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.examination-item {
  height: 5rem;
  border-radius: 0.25rem;
  background-color: #fff;
  margin-bottom: 0.4rem;
  display: flex;
  display: -webkit-flex;
}
.examination-img {
  width: 2.5rem;
  height: 5rem;
  border-radius: 0.25rem;
  min-width: 2.5rem;
}
.examination-img img {
  width: 100%;
  height: 100%;
}
.draw-cer-bg {
  background: url('../../../assets/i/wap/exam/cer-title-bg.png') no-repeat 0 0;
  background-size: cover;
}
.c-fc-draw {
  color: #fa875d;
}
.pop-cer {
  max-width: inherit;
  width: 480px;
  height: 478px;
  position: relative;
  top: 0;
  left: 50%;
  margin-left: -240px;
}
.pop-title-position {
  font-size: 18px;
  bottom: 218px;
  left: 0;
}
.pop-title-btn {
  font-size: 16px;
  color: #fa6037;
  width: 154px;
  height: 48px;
  line-height: 48px;
  background: rgba(255, 255, 255, 1);
  border-radius: 24px;
  position: absolute;
  bottom: 128px;
  left: 50%;
  margin-left: -78px;
}
.pop-title-close {
  font-size: 32px;
  left: 0;
  bottom: 20px;
}
.prodType-triangle {
    width: 0;
    height: 0;
    border-width: 0.2rem 0.2rem 0 0.2rem;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    bottom: 0;
    right: 0;
}
</style>
